<template>
  <div>
    <a-row :gutter="[32, 8]">
      <a-col :span="12">
        <div class="text-lg font-bold h-8">实时库存</div>
        <div class="border border-solid border-gray-100  w-80%">
          <VueDataUi
            component="VueUiDonut"
            :dataset="transLiveData"
            :config="config"
          />
        </div>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[32, 8]">
          <a-col :span="24">
            <div>
            <div class="text-lg font-bold h-8">实时占比（元）</div>
            <div class="border border-solid border-gray-100  w-60%">
              <VueDataUi
                component="VueUiDonut"
                :dataset="trans_supplier_LiveData"
                :config="config"
              />
            </div>
              
            </div>
          </a-col>
          <a-col :span="12">
            <div class="flex item-center justify-start items-center h-8">
                <div class="text-lg font-bold">历史库存</div>
                <span class="ml-3">选择时间：</span>
                <a-date-picker
                  show-time
                  placeholder="选择时间"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  @ok="onOk1"
                />
              </div>
              <div class="border border-solid border-gray-100 w-50%">
                <VueDataUi
                  component="VueUiDonut"
                  :dataset="transHisData"
                  :config="config"
                />
              </div>
          </a-col>
          <a-col :span="12">
            <div class="flex item-center justify-start items-center h-8">
              <div class="text-lg font-bold">历史累计（元）</div>
              <span class="ml-3">选择时间：</span>
              <a-date-picker
                show-time
                placeholder="选择时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                @ok="onOk2"
              />
            </div>
            <div class="border border-solid border-gray-100 ">
              <VueDataUi
                component="VueUiDonut"
                :dataset="trans_supplier_HisData"
                :config="config"
              />
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import {
  VueDataUi,
  type VueUiDonutDatasetItem,
  type VueUiDonutConfig,
} from "vue-data-ui";
import "vue-data-ui/style.css";
import { message } from "ant-design-vue";
import "vue-data-ui/style.css";
import Api from "@/api/backend/api";
import XEUtils from "xe-utils";
// 2024-10-20 21:31:24.668
const datetime = ref(XEUtils.toDateString(new Date(), `yyyy-MM-dd HH:mm:ss`));

const onOk1 = async (value: Dayjs) => {
  datetime.value = value;
  historyData.value = await Api.mStockController.historyStock({
    datetime: datetime.value,
  });
};

const historyData = ref([]);
const newiestData = ref([]);
const supplierLiveData = ref([]);
const supplierHisData = ref([]);
historyData.value = await Api.mStockController.historyStock({
  datetime: datetime.value,
});
newiestData.value = await Api.mStockController.newiestStock();

const transHisData = computed(() => {
  return historyData.value.map((item) => {
    return {
      name: item.material_name,
      color: `${getRandomColor()}`,
      values: [item.net_qty],
    };
  });
}, [historyData]);

const transLiveData = computed(() => {
  return newiestData.value.map((item) => {
    return {
      name: item.material_name,
      color: `${getRandomColor()}`,
      values: [item.net_qty],
    };
  });
}, [newiestData]);

const config = ref({
  responsive: false,
  theme: "",
  customPalette: [],
  useCssAnimation: true,
  useBlurOnHover: true,
  userOptions: {
    show: true,
    buttons: {
      tooltip: true,
      pdf: true,
      csv: true,
      img: true,
      table: true,
      labels: true,
      fullscreen: true,
      sort: false,
      stack: false,
      animation: false,
    },
    buttonTitles: {
      open: "Open options",
      close: "Close options",
      tooltip: "Toggle tooltip",
      pdf: "Download PDF",
      csv: "Download CSV",
      img: "Download PNG",
      table: "Toggle table",
      labels: "Toggle labels",
      fullscreen: "Toggle fullscreen",
    },
  },
  translations: { total: "总共", average: "平均" },
  table: {
    show: false,
    responsiveBreakpoint: 400,
    th: { backgroundColor: "#fafafa", color: "#2D353C", outline: "none" },
    td: {
      backgroundColor: "#FFFFFF",
      color: "#2D353C",
      outline: "none",
      roundingValue: 0,
      roundingPercentage: 0,
    },
    columnNames: { serie: "Series", value: "Value", percentage: "Percentage" },
  },
  style: {
    fontFamily: "inherit",
    chart: {
      useGradient: true,
      gradientIntensity: 40,
      backgroundColor: "#FFFFFF",
      color: "#2D353C",
      layout: {
        labels: {
          dataLabels: {
            show: true,
            useLabelSlots: false,
            hideUnderValue: 3,
            prefix: "",
            suffix: "",
          },
          value: { rounding: 0, show: true, formatter: null },
          percentage: {
            color: "#2D353C",
            bold: true,
            fontSize: 12,
            rounding: 0,
            formatter: null,
          },
          name: { color: "#2D353C", bold: false, fontSize: 12 },
          hollow: {
            show: true,
            total: {
              show: true,
              bold: false,
              fontSize: 12,
              color: "#A1A1A1",
              text: "总共",
              offsetY: 0,
              value: {
                color: "#2D353C",
                fontSize: 12,
                bold: true,
                suffix: "",
                prefix: "",
                offsetY: 0,
                rounding: 0,
                formatter: null,
              },
            },
            average: {
              show: true,
              bold: false,
              fontSize: 12,
              color: "#A1A1A1",
              text: "平均",
              offsetY: 0,
              value: {
                color: "#2D353C",
                fontSize: 12,
                bold: true,
                suffix: "",
                prefix: "",
                offsetY: 0,
                rounding: 0,
                formatter: null,
              },
            },
          },
        },
        donut: {
          strokeWidth: 55,
          borderWidth: 1,
          useShadow: false,
          shadowColor: "#2D353C",
        },
      },
      comments: {
        show: true,
        showInTooltip: true,
        width: 100,
        offsetY: 0,
        offsetX: 0,
      },
      legend: {
        show: true,
        bold: false,
        backgroundColor: "#FFFFFF",
        color: "#2D353C",
        fontSize: 12,
        roundingValue: 0,
        roundingPercentage: 0,
      },
      tooltip: {
        show: true,
        color: "#2D353C",
        backgroundColor: "#FFFFFF",
        fontSize: 12,
        customFormat: null,
        borderRadius: 4,
        borderColor: "#e1e5e8",
        borderWidth: 1,
        backgroundOpacity: 100,
        position: "center",
        offsetY: 24,
        showValue: true,
        showPercentage: true,
        roundingValue: 0,
        roundingPercentage: 0,
      },
      title: {
        text: "",
        color: "#2D353C",
        fontSize: 12,
        bold: true,
        textAlign: "center",
        paddingLeft: 0,
        paddingRight: 0,
        subtitle: { color: "#A1A1A1", text: "", fontSize: 12, bold: false },
      },
    },
  },
});

supplierHisData.value = await Api.mStockController.historySupplierCount({
  datetime: datetime.value,
});
supplierLiveData.value = await Api.mStockController.newiestSupplierCount();

const onOk2 = async (value: Dayjs) => {
  datetime.value = value;
  supplierHisData.value = await Api.mStockController.historySupplierCount({
    datetime: datetime.value,
  });
};
const trans_supplier_HisData = computed(() => {
  return supplierHisData.value.map((item) => {
    return {
      name: item.supplier_name,
      color: `${getRandomColor()}`,
      values: [item.total_net_amount],
    };
  });
}, [supplierHisData]);

const trans_supplier_LiveData = computed(() => {
  return supplierLiveData.value.map((item) => {
    return {
      name: item.supplier_name,
      color: `${getRandomColor()}`,
      values: [item.total_net_amount],
    };
  });
}, [supplierLiveData]);

function getRandomColor() {
  // 生成0到255之间的随机整数
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  // 生成0到1之间的随机浮点数作为透明度
  var a = Math.random().toFixed(2); // 保留两位小数

  // 返回rgba格式的颜色字符串
  return `rgba(${r},${g},${b},${a})`;
}
</script>

<style></style>
